<template>
    <!-- 视频管理 -->
    <div class="p-2">
        <!-- 头部搜索 -->
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div class="mb-[10px]" v-show="showSearch">
                <el-card shadow="hover">
                    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                        <el-form-item label="用户ID" prop="userId">
                            <el-input v-model.trim="queryParams.userId" placeholder="用户ID" clearable style="width: 200px" />
                        </el-form-item>

                        <el-form-item label="是否违规" prop="violate" style="width: 160px">
                            <el-select v-model="queryParams.violate" placeholder="请选择" clearable>
                                <el-option v-for="dict in options" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="创建时间" style="width: 308px;">
                            <el-date-picker v-model="huonetime" type="daterange" start-placeholder="开始时间"
                                end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
                                @change="tionmetin()" :default-time="defaultTime" style="max-width: 60vw" />
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" icon="Search" @click="tonseinc()">搜索</el-button>
                            <el-button icon="Refresh" @click="resetQuery()">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </transition>

        <el-card shadow="hover">
            <template #header>
                <el-row :gutter="10" class="mb8">
                    <!-- <el-col :span="1.5">
                        <el-button type="primary" plain icon="Promotion" :disabled="single"
                            @click="handleUpdate()">查看视频</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="danger" plain :disabled="single" icon="WarnTriangleFilled" @click="tuinseonui()"
                            v-hasPermi="['ums:userVideo:violate']">违规</el-button>
                    </el-col> -->
                    <right-toolbar v-model:showSearch="showSearch" :columns="columns" @queryTable="getList"
                        :search="true" />
                </el-row>
            </template>
            <el-table :data="ordersListl" v-loading="loading" border max-height="550"
                @selection-change="handleSelectionChange">
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column label="用户ID" align="center" width="200" prop="userId" v-if="columns[0].visible" />

                <el-table-column label="视频标题" align="center" width="200" prop="title" v-if="columns[1].visible" />

                <el-table-column label="视频封面" align="center" min-width="120" v-if="columns[2].visible">
                    <template #default="scope">
                        <el-image style="width: 80px; height: 80px" :src="scope.row.cover"
                            :preview-src-list="[scope.row.cover]" fit="contain" :preview-teleported="true">
                            <template #error>
                                <div></div>
                            </template>
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column label="视频二维码" align="center" min-width="180" v-if="columns[3].visible">
                    <template #default="scope">
                        <qr-code :value="scope.row.videoUrl.split('?')[0]" :size="120"
                            @click="tionsenc(scope.row)"></qr-code>
                    </template>
                </el-table-column>

                <el-table-column label="播放数" align="center" prop="playCount" v-if="columns[4].visible" />

                <el-table-column label="佣金" align="center" prop="rebate" v-if="columns[5].visible" />

                <el-table-column label="直属用户ID" align="center" width="200" prop="directUserId" v-if="columns[6].visible" />

                <el-table-column label="直属佣金" align="center" prop="directRebate" v-if="columns[7].visible" />

                <el-table-column label="是否违规" align="center" v-if="columns[8].visible">
                    <template #default="scope">{{ luonseuic(scope.row.violate) }}</template>
                </el-table-column>

                <el-table-column label="备注" align="center" prop="remark" v-if="columns[9].visible" />

                <el-table-column label="视频创建时间" align="center" fixed="right" width="165" v-if="columns[10].visible">
                    <template #default="scope">
                        {{ scope.row.videoTime.slice(0, -3) }}
                    </template>
                </el-table-column>

                <!-- <el-table-column label="媒体类型" align="center" v-if="columns[5].visible">
                    <template #default="scope">{{ mnseuin(scope.row.mediaType) }}</template>
                </el-table-column> -->

                <el-table-column label="创建时间" align="center" fixed="right" width="165" v-if="columns[11].visible">
                    <template #default="scope">
                        {{ scope.row.createTime.slice(0, -3) }}
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" fixed="right" width="150" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-tooltip content="查看视频" placement="top">
                            <el-button link type="primary" icon="Promotion" @click="handleUpdate(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="违规" placement="top" v-if="scope.row.violate == 0">
                            <el-button link type="primary" icon="WarnTriangleFilled" @click="tuinseonui(scope.row)"
                                v-hasPermi="['ums:userVideo:violate']"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" @pagination="getList" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" />
        </el-card>

        <!-- 二维码对话框 -->
        <el-dialog title="二维码" v-model="cuinseon.visible" width="500px" append-to-body>
            <div style="display: flex;justify-content: center;">
                <qr-code :value="monsecu" :size="300"></qr-code>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 违规处理对话框 -->
        <el-dialog title="违规处理" v-model="tuonsenc.visible" width="500px" append-to-body>
            <div>
                <el-form ref="ruionseui" :model="muonsein" :rules="rules">
                    <el-form-item label="备注" prop="remark" label-width="80px">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容"
                            v-model="muonsein.remark" clearable>
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="muionseui">确 定</el-button>
                    <el-button @click="huoneuic">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="Videos">
import { listVideo, Vionseut } from '@/api/operates/videos/index';
import { VideoQuery, Videotui, Violate } from '@/api/operates/videos/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const columns = ref<FieldOption[]>([
    { key: 0, label: `用户ID`, visible: true, children: [] },
    { key: 1, label: `视频标题`, visible: true, children: [] },
    { key: 2, label: `视频封面`, visible: true, children: [] },
    { key: 3, label: `视频二维码`, visible: true, children: [] },
    { key: 4, label: `播放数`, visible: true, children: [] },
    { key: 5, label: `佣金`, visible: true, children: [] },
    { key: 6, label: `直属用户ID`, visible: true, children: [] },
    { key: 7, label: `直属佣金`, visible: true, children: [] },
    { key: 8, label: `是否违规`, visible: true, children: [] },
    { key: 9, label: `备注`, visible: true, children: [] },
    { key: 10, label: `视频创建时间`, visible: true, children: [] },
    { key: 11, label: `创建时间`, visible: true, children: [] },
])

const initFormData: Videotui = {
    id: '',
    userId: '',
    videoUrl: '',
    cover: '',
    mediaType: '',
    videoTime: '',
    playCount: '',
    title: '',
    rebate: 0,
    violate: '',
    remark: '',
    createTime: '',
}
const data = reactive<PageData<Videotui, VideoQuery>>({
    form: { ...initFormData },
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: '',
        violate: '',
        startTime: '',
        endTime: '',
    },
    rules: {
        remark: [{ required: true, message: "违规备注不能为空", trigger: "change" }]
    },
})
const { queryParams, form, rules } = toRefs(data)


const muonsein = ref<Violate>({
    id: '',
    remark: ''
});

/**
 * 查询的是否违规
 */
const options = [
    {
        value: '1',
        label: '是',
    },
    {
        value: '0',
        label: '否',
    }
]

/**
 * 媒体类型
 */
const mnseuin = (val: string | number) => {
    if (val === 2) {
        return '图集'
    } else if (val === 4) {
        return '视频'
    }
}

/**
 * 是否违规
 */
const luonseuic = (val: string | number) => {
    if (val === 1) {
        return '是'
    } else if (val === 0) {
        return '否'
    }
}
const cuinseon = reactive<DialogOption>({
    visible: false,
});
const tuonsenc = reactive<DialogOption>({
    visible: false,
});
const ids = ref<Array<string | number>>([])
const addres = ref<Array<string | number>>([])
const single = ref(true)
const monsecu = ref()
const huonetime = ref('')
const ordersListl = ref<Videotui[]>([]);
const total = ref(0);
const loading = ref(true)
const showSearch = ref(true)
const queryFormRef = ref<ElFormInstance>();
const ruionseui = ref<ElFormInstance>();
/**
 * 默认时间
 */
const defaultTime = ref<[Date, Date]>([
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59),
])

/**
 * 查询的时间
 */
const tionmetin = () => {
    if (huonetime.value != null) {
        // 开始时间
        queryParams.value.startTime = huonetime.value[0];
        // 结束时间
        queryParams.value.endTime = huonetime.value[1];
    } else {
        huonetime.value = '';
        queryParams.value.startTime = '';
        queryParams.value.endTime = '';
    }
}

/**
 * 搜索按钮操作
 */
const tonseinc = () => {
    queryParams.value.pageNum = 1;
    getList();
}

/**
 * 重置按钮操作
 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    huonetime.value = '';
    tionmetin()
    getList();
}

/**
 * 查询视频列表
 */
const getList = async () => {
    loading.value = true;
    const res = await listVideo(queryParams.value);
    ordersListl.value = res.data.list;
    total.value = res.data.total;
    loading.value = false;
}

/**
 * 多选框选中数据
 */
const handleSelectionChange = (selection: Videotui[]) => {
    ids.value = selection.map((item: Videotui) => item.id);
    addres.value = selection.map((item: Videotui) => item.videoUrl.split("?")[0]);
    single.value = selection.length != 1;
}

/**
 * 跳转外链地址
 */
const handleUpdate = (row?: Videotui) => {
    monsecu.value = addres.value[0] || row?.videoUrl.split("?")[0];
    window.open(monsecu.value);
}
/**
 * 二维码弹框操作
 */
const tionsenc = (row?: Videotui) => {
    monsecu.value = row?.videoUrl.split("?")[0];
    cuinseon.visible = true;
}
/**
 * 违规弹窗按钮操作
 */
const tuinseonui = (row?: Videotui) => {
    const Id = row?.id || ids.value[0]
    muonsein.value.id = Id;
    ruionseui.value?.resetFields();
    tuonsenc.visible = true;
}
/**
 * 违规弹窗的确认
 */
const muionseui = () => {
    ruionseui.value?.validate(async (valid: boolean) => {
        if (valid) {
            await Vionseut(muonsein.value)
            proxy?.$modal.msgSuccess("提交成功");
            ruionseui.value?.resetFields();
            tuonsenc.visible = false;
            getList();
        }
    });
}

/**
 * 违规弹窗的取消
 */
const huoneuic = () => {
    ruionseui.value?.resetFields();
    tuonsenc.visible = false;
}

/**
 * 二维码的确认
 */
const submitForm = () => {
    cuinseon.visible = false;
}

/**
 * 二维码的取消
 */
const cancel = () => {
    cuinseon.visible = false;
}



onMounted(() => {
    getList();
});
</script>

<style scoped></style>